<!-- 包含材料 -->
<template>
  <view class="materials">
    <view class="top">
      <view>供应商 ：</view>
      <view>{{ supplier_name }}</view>
    </view>
    <view class="content">
      <view class="table">
        <view class="row back-color">
          <view class="item">商品</view>
          <view class="item">数量</view>
          <view class="item-style">生产日期</view>
          <view class="item-style">保质期</view>
          <view class="item-style">检测报告</view>
        </view>
        <view
          class="row"
          v-for="(item, index) in purchasegoodsinfo"
          :key="index"
        >
          <view class="item">{{ item.goods_name }}</view>
          <view class="item">{{ item.goods_num }}</view>
          <view class="item-style">{{ item.productiontime }}</view>
          <view class="item-style">{{ item.assurancetime }}</view>
          <view class="item-style" @click="goSwipe(item)">{{
            item.filesrc.length
          }} 份</view>
        </view>
      </view>
    </view>
    <van-overlay :show="show">
      <view class="wrapper">
        <view class="block">
          <swiper
            class="swiper"
            :indicator-dots="true"
            :autoplay="false"
            :circular="circular"
            :vertical="false"
            :interval="interval"
            :duration="duration"
          >
            <block v-for="(item,index) in filesrc" :key="index">
              <swiper-item class="swiper-item">
                <image class="swiper-img"  :src="API+item" @click="show=false"></image>
              </swiper-item>
            </block>
          </swiper>
        </view>
      </view>
    </van-overlay>
  </view>
</template>

<script>
export default {
  data() {
    return {
      supplier_name: "",
      purchaseinfo: {},
      purchase_sn_detail: "",
      purchasegoodsinfo: [],
      show: false,
      filesrc:[],
      interval: 2000,//自动切换时间间隔
      duration: 500,//滑动动画时长
    };
  },
  onLoad(options) {
    this.purchase_sn_detail = options.purchase_sn_detail;
    if (this.purchase_sn_detail) {
      this.getPurchaseokdetail();
    }
  },
  methods: {
    /*检测报告*/
    goSwipe(item) {
      this.show=true;
      this.filesrc = item.filesrc;
    },
    /*包含材料*/
    async getPurchaseokdetail() {
      let res = await this.$ajax.onPurchaseokdetail({
        purchase_sn_detail: this.purchase_sn_detail,
      });
      if (res.code == 1) {
        this.supplier_name = res.data.supplier_name;
        this.purchasegoodsinfo = res.data.purchasegoodsinfo;
      }
    },

  },
  mounted() {},
  onShow() {},
};
</script>

<style lang="scss" >
/*弹框样式*/
.wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  .block {
    width: 100%;
    height: 1000rpx;
    background-color: #fff;
    margin: 0 30rpx;
    padding: 40rpx 20rpx;
    .swiper{
      height: 900rpx;
    }
  }
}
.materials {
  min-height: 100vh;
  height: 100%;
  background: #f4f4f4;

  .top {
    display: flex;
    background: white;
    padding: 30rpx;
    color: rgba(16, 16, 16, 1);
    font-size: 28rpx;
  }

  .content {
    margin-top: 50rpx;
    background: white;
    padding: 10rpx;
    .table {
      width: 100%;
      .item {
        width: 15%;
        padding: 10px;
        display: flex;
        justify-content: center;
        align-items: center;
        word-break: break-all;
        border-right: 1px solid #ccc;
      }
      .item-style {
        width: 23%;
        padding: 10px;
        display: flex;
        justify-content: center;
        align-items: center;
        word-break: break-all;
        border-right: 1px solid #ccc;
      }

      .row {
        display: flex;
        border: 1px solid #ccc;
      }

      .back-color {
        background: #cdcccc;
      }
    }
  }
}
</style>